import React, { Component } from 'react';
import { 
    Button, 
    IconButton, 
    ButtonGroup 
} from '@mui/material';
import { Cached } from '@mui/icons-material';
import App from './App';

interface MainUiState {
    n: number;
    nday: number;
}

const TIME_PERIODS = {
    TWO_HOURS: 60 * 2,
    FOUR_HOURS: 60 * 4,
    EIGHT_HOURS: 60 * 8,
    ONE_DAY: 60 * 24,
}

class MainUi extends Component<{}, MainUiState> {
    constructor(props: {}) {
        super(props);
        this.state = {
            n: TIME_PERIODS.TWO_HOURS,
            nday: 0
        };
    }

    handleTimeChange = (n: number, nday: number) => {
        this.setState({ n, nday });
    };

    handleRefresh = () => {
        const { n } = this.state;
        this.setState({ 
            n: n % 2 === 1 ? n - 1 : n + 1,
            nday: 0 
        });
    };

    render() {
        const { n, nday } = this.state;

        return (
            <div style={{ width: "100%", height: "100%" }}>
                <div style={{ display: "flex", justifyContent: "right" }}>
                    <ButtonGroup variant="contained" aria-label="Time period selection">
                        <Button onClick={() => this.handleTimeChange(0, 3)}>
                            3 Days
                        </Button>
                        <Button onClick={() => this.handleTimeChange(0, 2)}>
                            2 Days
                        </Button>
                        <Button onClick={() => this.handleTimeChange(0, 1)}>
                            Yesterday
                        </Button>
                        <Button onClick={() => this.handleTimeChange(TIME_PERIODS.ONE_DAY, 0)}>
                            1 Day
                        </Button>
                        <Button onClick={() => this.handleTimeChange(TIME_PERIODS.EIGHT_HOURS, 0)}>
                            8 Hours
                        </Button>
                        <Button onClick={() => this.handleTimeChange(TIME_PERIODS.FOUR_HOURS, 0)}>
                            4 Hours
                        </Button>
                        <Button onClick={() => this.handleTimeChange(TIME_PERIODS.TWO_HOURS, 0)}>
                            2 Hours
                        </Button>
                        <IconButton 
                            color="primary" 
                            onClick={this.handleRefresh}
                            aria-label="Refresh"
                        >
                            <Cached />
                        </IconButton>
                    </ButtonGroup>
                </div>
                <div>
                    <App minutes={n} nday={nday} />
                </div>
            </div>
        );
    }
}

export default MainUi;